<template>
  <div class="login">
    <div class="form">

      <div style="
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 25px;
        ">
        <img style="
            width: 50px;
            height: 50px;
            margin-right: 8px;
            border-radius: 50%;
          " src="../assets/image//jsDoctor.jpg" />
        <h2>京山市人民医院</h2>
      </div>
      <!--    <div style="
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 25px;
        ">
        <img style="
            width: 200px;
            height: auto;
            margin-right: 8px;
          " src="../assets/image/qmCare.png" />
      </div> -->
      <h3 class="title">居家服务管理平台</h3>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0" size="medium">
        <el-form-item label="" prop="username">
          <el-input v-model.trim="ruleForm.username" autocomplete="off" placeholder="请输入账号"
            @keyup.enter.native="submit('ruleForm')">
            <i slot="prefix" class="el-input__icon el-icon-user"></i>
          </el-input>
        </el-form-item>
        <el-form-item label="" prop="password">
          <el-input type="password" v-model.trim="ruleForm.password" autocomplete="off" placeholder="请输入密码"
            @keyup.enter.native="submit('ruleForm')">
            <i slot="prefix" class="el-input__icon el-icon-lock"></i>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button class="submit" type="primary" @click="submit('ruleForm')" :loading="loading">登录</el-button>
        </el-form-item>
      </el-form>

    </div>
  </div>
</template>
<script>
import { APilogin } from "@a";
import { debounce } from "@u/index";
import { mapMutations } from "vuex";
import { initDynamicRoutes } from "@/router/index";
import { permissionFn } from "@u/directives";
export default {
  name: "Login",
  data() {
    return {
      loading: false,
      ruleForm: {
        username: "",
        password: "",
      },
      rules: {
        username: [
          {
            required: true,
            message: "请输入账号",
            trigger: ["blur", "change"],
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: ["blur", "change"],
          },
          {
            min: 6,
            max: 16,
            message: "长度在 6 到 16个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },

  methods: {
    ...mapMutations(["setUser"]),
    submit: debounce(
      function () {
        this.$refs["ruleForm"].validate((valid) => {
          if (valid) {
            this.login();
          } else {
            return false;
          }
        });
      },
      300,
      true
    ),

    login() {
      this.loading = true;
      let params = {
        username: this.ruleForm.username,
        password: this.ruleForm.password,
      };
      APilogin(params)
        .then((res) => {
          this.setUser(res.data);
          const path = initDynamicRoutes();
          permissionFn();
          this.$router.push(path);
          /*  this.$router.push("/projectConfiguration/index"); */
        })
        .finally((_) => {
          this.loading = false;
        });
    },
  },
};
</script>

<style lang="less" scoped>
.login {
  display: flex;
  width: 100%;
  height: 100vh;
  min-height: 500px;
  overflow: auto;
  background: url("../assets/image/login-bg.jpg") no-repeat center right;
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  background-size: cover;
  align-items: center;
  .form {
    flex: none;
    width: 320px;
    padding: 60px;
    margin: 0 auto;
    border-radius: 4px;
    /*    background-color: #e1e9ef; */
    border: 1px solid #e5e5e5; /* 设置背景颜色 */
    box-shadow: inset 10px 10px 10px rgba(0, 0, 0, 0.05),
      25px 35px 20px rgba(0, 0, 0, 0.05), 25px 30px 30px rgba(0, 0, 0, 0.05),
      inset -20px -20px 25px rgba(255, 255, 255, 0.9);
    border-radius: 25px;
    .title {
      margin-top: 0;
      margin-bottom: 60px;
      text-align: center;
      // color: #ffffff;
    }
    .submit {
      margin-top: 30px;
      width: 100%;
    }
  }
}
</style>
